<template>
    <el-dialog
        v-bind="$attrs"
        v-on="$listeners"
        :title="title"
        :width="widthVal"
        :visible="isOpen"
        :close-on-click-modal="false"
        :append-to-body="appendToBody"
        :class="cssClass"
        @close="onClose"
        :show-close="showClose"
        :close-on-press-escape="closeOnPressEscape"
    >
        <!-- 自定义对话框表头 -->
        <span slot="title" v-if="isCustomTitle === true">
            <slot name="title"></slot>
        </span>
        <div class="edu-dialog_body" :style="`height: ${height};`">
            <slot></slot>
        </div>
        <span slot="footer" class="dialog-footer" v-if="showFooter">
            <slot name="buttons" v-if="showButtons !== false">
                <el-button
                    v-if="showCancelBtn !== false"
                    @click="close"
                >{{cancelBtnText ||'取消'}}</el-button>
                <el-button
                    v-if="showResetBtn !== false"
                    @click="reset"
                >{{resetBtnText || '重置'}}</el-button>
                <el-button
                    type="primary"
                    v-if="showConfirmBtn !== false"
                    @click="confirm"
                >{{confirmBtnText || '提交'}}</el-button>
            </slot>
        </span>
    </el-dialog>
</template>
<script>
// import UTILS from "@/utils/utils";
/**
 * 对话框组件
 */
export default {
    name: "EduDialog",
    props: {
        title: { default: "" },
        width: { default: null },
        height: { default: null },
        showFooter: { default: true },
        showButtons: { default: true },
        showCancelBtn: { default: true },
        showConfirmBtn: { default: true },
        showResetBtn: { default: false },
        cancelBtnText: { default: null },
        confirmBtnText: { default: null },
        resetBtnText: { default: null },
        visible: { default: null },
        isCustomTitle: { default: false },
        appendToBody: { default: false },
        size: { default: null }, // small / medium / large
        showClose: {
            default: true
        },
        closeOnPressEscape: {
            default: true
        }
    },
    data() {
        return {
            openStatus: false
        };
    },    
    computed: {
        cssClass() {
            const css = { "edu-dialog_wrapper": true };
            if (!_.isNil(this.size)) {
                css[this.size] = true;
            }
            return css;
        },
        widthVal() {
            if (!_.isNil(this.size)) {
                let _width = "";
                switch (this.size) {
                    case "medium":
                        _width = "52.1%";
                        break;
                    case "large":
                        _width = "62.5%";
                        break;
                    default:
                        // small
                        _width = "31.25%";
                        break;
                }
                return _width;
            }
            return this.width;
        },
        isOpen() {
            if (!_.isNil(this.visible)) {
                return this.visible;
            }
            if (!_.isNil(this.openStatus)) {
                return this.openStatus;
            }
        }
    },
    methods: {
        open(callback) {
            this.openStatus = true;
            if (!_.isNil(this.visible)) {
                this.$emit("update:visible", true);
            }
            if (callback) {
                this.$nextTick(() => {
                    callback();
                }, 300);
            }
        },
        close() {
            this.openStatus = false;
            if (!_.isNil(this.visible)) {
                this.$emit("update:visible", false);
            }
        },
        onClose() {
            this.close();
        },
        confirm() {
            this.$emit("confirm");
        },
        reset() {
            this.$emit("reset");
        }
    }
};
</script>

<style lang="scss">
.edu-dialog_wrapper {
    &.small {
        .el-dialog {
            min-width: 600px;
        }
    }
    &.medium {
        .el-dialog {
            min-width: 800px;
        }
    }
    &.large {
        .el-dialog {
            min-width: 1000px;
        }
    }
    .el-dialog {
        margin-left: auto;
        margin-right: auto;
        margin-top: 0!important;
        display: flex;
        flex-direction: column;
        position: relative;
        top: 50%; /*偏移*/
        transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        .el-dialog__body {
            padding: 0px !important;
        }
        .edu-dialog_body {
            padding: 15px;
            overflow: auto;
        }
    }
}
</style>
